<!DOCTYPE HTML>
<html>
	<head>
		<title>please enter your title</title>
		<meta charset="utf-8">
		<meta name="Author" content="潭州学院-阿飞老师">
		<style type='text/css'>
			*{ margin:0; padding:0;}

			

		</style>
	</head>
	<body>
		<select id="sheng" name='sheng'>
			<option value="0">省</option>
		</select>
		<select id='shi'>
			<option value="0">市</option>
		</select>
		<select id='xian'>
			<option value="0">县</option>
		</select>
		<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
		<script type="text/javascript" src="areaData.js"></script>
		<script type="text/javascript">
			$(function(){
				
				var sheng = areaData.sheng;
				var $sheng = $('#sheng');
				var $shi = $('#shi');
				var $xian = $('#xian');
				var shiIndex = 0;
				for ( var i=0;i<sheng.length;i++ )
				{
					var $option = $('<option value='+ (i+1) +'>'+ sheng[i] +'</option>');
					$sheng.append( $option );
				}
				$sheng.change(function(){
					shiIndex = this.selectedIndex - 1;
					if ( shiIndex < 0 )
					{

					}
					else
					{
						var shi = areaData.shi['a_'+shiIndex];
						$shi.html('<option value="0">市</option>');
						$xian.html('<option value="0">县</option>');
						for (var i=0;i<shi.length;i++ )
						{
							var $option = $('<option value='+ (i+1) +'>'+ shi[i] +'</option>');
							$shi.append( $option );
						}
					}
				});
				$shi.change(function(){
					var index = this.selectedIndex - 1;
					if ( index < 0 )
					{

					}
					else
					{
						var xian = areaData.xian['a_'+shiIndex+'_'+index];
						$xian.html('<option value="0">县</option>');
						for (var i=0;i<xian.length;i++ )
						{
							var $option = $('<option value='+ (i+1) +'>'+ xian[i] +'</option>');
							$xian.append( $option );
						}
					}
				});
			});
		</script>
	</body>
</html>